<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="workShopEditWinDialogVisible"
      title="修改车间"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editWorkShop" label-width="auto">
        <el-form-item  style="font-weight: bold" label="车间编码">
          <el-input v-model="editWorkShop.workShopCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="车间名称">
          <el-input v-model="editWorkShop.workShopName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;" label="面积">
          <el-input-number style="width: 220px" min="0" v-model="editWorkShop.area" step="0.1"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="负责人">
          <el-input v-model="editWorkShop.charge"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="是否启用">
          <el-radio-group v-model="editWorkShop.workShopStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="editWorkShop.remark" type="textarea"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEditWorkShop">取消</el-button>
        <el-button type="primary" @click="editWorkShopSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,watch} from 'vue'
import workShopRequest from "@/api/workShop.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelWorkShopEdit'])
// 弹窗标记
let workShopEditWinDialogVisible = ref(false);
// 申明的属性
// workShopId: 当前要编辑的车库的编号
let props = defineProps(["workShopId"]);
// 编辑的单位对象
let editWorkShop = ref({});

/**
 * 取消编辑按钮事件
 */
function cancelEditWorkShop(){
  // 将当前的编辑对象置空
  editWorkShop = ref({});
  // 关闭窗体
  workShopEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkShopEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkShopEdit")
}

/**
 * 编辑提交
 */
function editWorkShopSubmit(){
  workShopRequest.updateWorkShopById(editWorkShop.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"编辑车间成功"
      });
      // 关闭弹窗
      cancelEditWorkShop();
      // 触发编辑完成的事件
      emits('editComplete',res.data);
    }else if (res.data == '车库编码不能为空') {
      ElMessage({
        type:"warning",
        message:"车库编码不能为空"
      });
    } else if (res.data == '车库名称不能为空') {
      ElMessage({
        type:"warning",
        message:"车库名称不能为空"
      });
    } else {
      ElMessage({
        type:"warning",
        message:"修改车库失败"
      });
    }
  })
}

/**
 * 通过 workShopId 加载任务信息
 * @param workShopId
 */
function loadWorkShopById(workShopId){
  workShopRequest.selectById(workShopId,res=>{
    if(res.data){
      editWorkShop.value = res.data;
      // 弹窗
      workShopEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.workShopId
 * // 每次属性 props.workShopId 发生变化这里都会执行
 */
watch(()=>props.workShopId,()=>{
  // 判断 workShopId 是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.workShopId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadWorkShopById(props.workShopId);
  }
});
</script>
<style scoped>
</style>